<!--
 * @Description: {{ByRuin}}
 * @Version: 2.0
 * @Author: Ruin 🍭
 * @Date: 2021-12-28 10:28:11
 * @LastEditors: 刘引
 * @LastEditTime: 2022-01-04 17:33:31
-->
<template>
  <keep-alive>
    <div class="form" id="boxCenter" name="boxCenter">
      <div class="w" v-if="this.$store.state.isChange == false">
        <div class="title">提交元器件采购需求(工作日24小时内客户经理联系您反馈)</div>

        <div class="body">
          <ul>
            <li>
              <p>
                <span>*</span>需求方名称：
              </p>
              <el-input
                v-model="message.companyname"
                placeholder="输入贵司名称"
                maxlength="45"
                show-word-limit
              />
            </li>
            <li>
              <p>
                <span>*</span>型号：
              </p>
              <el-input
                maxlength="45"
                show-word-limit
                v-model="message.partno"
                placeholder="输入具体型号，多个型号用“，”分开"
              />
            </li>
            <li>
              <p>
                <span>*</span>年份批号：
              </p>
              <el-input
                maxlength="45"
                show-word-limit
                v-model="message.lotno"
                placeholder="输入年份要求如2020+"
              />
            </li>
            <li>
              <p>
                <span>*</span>数量：
              </p>
              <el-input
                v-model="message.qty"
                onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                placeholder="输入数量"
              />
            </li>
            <li>
              <p>
                <span>*</span>交期要求：
              </p>
              <el-input
                maxlength="45"
                show-word-limit
                v-model="message.leadtime"
                placeholder="输入交期要求"
              />
            </li>
            <li>
              <p>
                <span>*</span>目标价：
              </p>
              <el-input
                oninput="value=value.replace(/[^0-9.]/g,'')"
                v-model="message.price"
                placeholder="输入预期价格"
              />
            </li>
            <li>
              <p>
                <span>*</span>联系电话：
              </p>
              <el-input
                maxlength="11"
                show-word-limit
                onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                v-model="message.telephone"
                placeholder="请输入完整的11位电话号码"
                @blur="judgePhone(message.telephone)"
              />
            </li>
            <span class="w wrong" v-show="isShowPhone">您的电话未输入完整！</span>
            <li>
              <p>
                <span>*</span>
                邮箱地址：
              </p>
              <el-input
                v-model="message.email"
                placeholder="例如xxxx.@qq.com"
                @blur="judgeEmail(message.email)"
              />
            </li>
            <span class="w wrong" v-show="isShowEmail">您的邮箱输入有误</span>
          </ul>
          <div class="submit-btn">
            <span @click="submitMsg">提交需求</span>
            <p>*您的隐私权益将被严格保密</p>
          </div>
        </div>
      </div>
      <div class="w" v-if="this.$store.state.isChange">
        <div
          class="title"
        >Submit component procurement requirements (the account manager will contact you within 24 hours of the working day)</div>

        <div class="body">
          <ul class="enStyle">
            <li>
              <p style="width: 400px;">
                <span>*</span>Your Name/Company Name:&nbsp;
              </p>
              <el-input v-model="message.companyname" placeholder maxlength="45" show-word-limit />
            </li>
            <li>
              <p>
                <span>*</span>Model / Type:&nbsp;
              </p>
              <el-input maxlength="45" show-word-limit v-model="message.partno" />
            </li>
            <li>
              <p>
                <span>*</span>Year & data code:&nbsp;
              </p>
              <el-input maxlength="45" show-word-limit v-model="message.lotno" />
            </li>
            <li>
              <p>
                <span>*</span>Quantity:&nbsp;
              </p>
              <el-input v-model="message.qty" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" />
            </li>
            <li>
              <p>
                <span>*</span>Delivery requirements:&nbsp;
              </p>
              <el-input maxlength="45" show-word-limit v-model="message.leadtime" placeholder />
            </li>
            <li>
              <p>
                <span>*</span>Target price:&nbsp;
              </p>
              <el-input oninput="value=value.replace(/[^0-9.]/g,'')" v-model="message.price" />
            </li>
            <li>
              <p>
                <span>*</span>Telephone Numbe:&nbsp;
              </p>
              <el-input
                maxlength="11"
                show-word-limit
                onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                v-model="message.telephone"
                @blur="judgePhone(message.telephone)"
              />
            </li>
            <span class="w wrong" v-show="isShowPhone">Please enter a complete phone number</span>
            <li>
              <p>
                <span>*</span>
                E-mail address:&nbsp;
              </p>
              <el-input v-model="message.email" @blur="judgeEmail(message.email)" />
            </li>
            <span class="w wrong" v-show="isShowEmail">Please enter the correct email address</span>
          </ul>
          <div class="submit-btn">
            <span @click="submitMsg">Submit</span>
            <p>*Your privacy rights will be kept strictly confidential</p>
          </div>
        </div>
      </div>
    </div>
  </keep-alive>
</template>
<script lang="ts">
import { postForm } from "../../../apis/form";
// import axios from "axios";
export default {
  data() {
    return {
      message: {
        companyname: "",
        partno: "",
        lotno: "",
        qty: "",
        leadtime: "",
        price: "",
        telephone: "",
        email: "",
      },
      isShowPhone: false,
      isShowEmail: false
    }

  },
  methods: {
    submitMsg() {
      // @ts-ignore
      console.log('用户输入的信息', this.message);
      // @ts-ignore
      if (this.message.companyname == '' || this.message.partno == '' || this.message.lotno == '' || this.message.leadtime == '' || this.message.price == '' || this.message.telephone == '' || this.message.email == '') {
        // @ts-ignore
        if (this.$store.state.isChange) {
          alert("Incorrect information input！")
        } else {
          alert("请将信息输入完全！")
        }
        // @ts-ignore
      } else if (this.isShowPhone == true || this.isShowEmail == true) {
        if (this.$store.state.isChange) {
          alert("Incorrect email or mobile phone number!")

        } else {
          alert("邮箱或者手机号输入有误！")
        }

      } else {
        this.formPost();
      }

    },
    formPost() {
      // @ts-ignore
      postForm(this.message).then((res: any) => {
        console.log('提交成功', res);
        alert("信息已提交！")
      }).catch((err: any) => {
        console.log('提交出现错误', err);
        alert("提交失败，请检查网络！")
      })
    },
    // 判断电话号码位数
    judgePhone(e: any) {
      if (e.length < 11) {
        // @ts-ignore
        this.isShowPhone = true;
      } else {
        // @ts-ignore
        this.isShowPhone = false;
      }

    },
    //判断邮箱输入是否正确
    judgeEmail(e: any) {
      console.log(e);
      let regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (e != '' && !regEmail.test(e)) {
        // @ts-ignore
        this.isShowEmail = true;
      } else {
        // @ts-ignore
        this.isShowEmail = false;
      }

    },
    toLocal() {
      //查找存储的锚点id
      let Id = localStorage.getItem('toId');
      let toElement = document.getElementById(Id);
      //锚点存在跳转
      if (Id) {
        toElement.scrollIntoView()
      }
    }
  },
  created() {
    this.$nextTick(() => { this.toLocal() })

  },
  mounted() {
    let _this = this;
    _this.$nextTick(function () {
      window.addEventListener('scroll', _this.handleScroll)
    })

  },
  destroyed() {
    localStorage.setItem('toId', '');
  }

}
</script>
<style lang="scss" scoped>
.form {
  margin: 80px 0;

  .title {
    height: 70px;
    background-color: #0c7fea;
    line-height: 70px;
    text-align: center;
    color: #fff;
  }
  .body {
    padding: 100px;
    padding-top: 50px;
    height: 758px;
    border: 1px solid #e6e6e6;
    ul {
      li {
        display: flex;
        align-items: center;
        margin: 15px 0;
        text-align: right;
        p {
          width: 150px;
        }
        // :deep(.el-input) {
        //   width: 100%;
        // }
        span {
          // text-align: right;
          color: #ee0e0e;
        }
      }
    }
  }
  .submit-btn {
    text-align: center;
    cursor: pointer;
    span {
      margin: 0 auto;
      display: block;
      margin-top: 55px;
      width: 310px;
      height: 57px;
      background-color: #0c7fea;
      font-size: 18px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 57px;

      letter-spacing: 0px;
      color: #ffffff;
    }
    p {
      margin-top: 30px;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 24px;
      letter-spacing: 0px;
      color: #ff0000;
    }
  }
}
.wrong {
  display: block;
  text-align: left;
  font-size: 12px;
  color: red;
  margin-left: 130px;
}
.enStyle {
  li {
    p {
      width: 400px !important;
    }
  }
}
</style>